﻿@using DevExtreme.NETCore.Demos.Models.TreeList

@model IEnumerable<Employee>

@(Html.DevExtreme().TreeList<Employee>()
    .ID("employees")
    .DataSource(Model)
    .KeyExpr("ID")
    .ParentIdExpr("HeadID")
    .AllowColumnResizing(true)
    .ColumnMinWidth(50)
    .ColumnAutoWidth(true)
    .Columns(column => {
        column.AddFor(m => m.Title);

        column.AddFor(m => m.FullName);

        column.AddFor(m => m.City);

        column.AddFor(m => m.State);

        column.AddFor(m => m.HireDate);
    })
    .ShowRowLines(true)
    .ShowBorders(true)
    .ExpandedRowKeys(new[] { 1, 3, 6 })
)

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        <span>Column resizing mode:</span>
        @(Html.DevExtreme().SelectBox()
            .ID("select-resizing")
            .DataSource(new[] { "nextColumn", "widget" })
            .Value("nextColumn")
            .Width(250)
            .OnValueChanged("selectBox_valueChanged")
        )
    </div>
</div>

<script>
    function selectBox_valueChanged(data) {
        var treeList = $("#employees").dxTreeList("instance");

        treeList.option("columnResizingMode", data.value);
    }
</script>
